<template>
  <div class="hello">
    <button @click="scrollTop">点击</button>
    <div id="test">
      <!-- <div class="dd"></div> -->
    </div>
    <a @click.prevent="aaa('div')">点击</a>
    <div id="div"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    scrollTop(){
      let div = document.getElementById('test');
      let h = div.offsetTop;
      console.log(h);
     document.body.scrollTop = h
      // Firefox
      document.documentElement.scrollTop = h
      // Safari
      window.pageYOffset = h;

      div.scrollTo(0,h)    //  给某个元素的滚动条社祝滚动条的位置
    },

    aaa(dd) {  //在移动端可以使用的锚链接跳转
          let anchor = document.getElementById(dd);
          if (anchor) {
              anchor.scrollIntoView();
          }
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

#test{
  margin-top: 200px;
  width: 500px;
  height: 600px;
  background-color: aqua;
  overflow-y: auto;
}
#test:focus{
  background-color: chartreuse;
}
.dd{
  height: 1200px;
  width: 100%;
}
#div{
  margin-top: 600px;
  width: 100px;
  height: 300px;
  border: 1px solid #eee;
  margin: 100px auto;
}
</style>
